<script setup lang="ts">
// icon
import coupons from '@/static/icon/index/coupons.svg'
import activity from '@/static/icon/index/activity.svg'
import star from '@/static/icon/index/star.svg'
// 组件
import MemberInfoCard from './components/member-info-card.vue'
import buyTypeCard from './components/buy-type-card.vue'
import iconContainer from '@/components/container/icon-container.vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view scroll-y enable-flex class="scroll-view">
    <!-- 背景图片 -->
    <image
      src="https://www.diulegemingzi.com/api/image/get/2/bg-image.jpg"
      class="bg-image"
      mode="aspectFill"
    />

    <!-- 用户信息卡片 -->
    <MemberInfoCard
      class="animation-slide-top"
      :style="{ marginTop: safeAreaInsets!.top + 'px' }"
    />

    <!-- 蛋糕购买类型 -->
    <buyTypeCard
      class="animation-slide-top"
      :style="[{ animationDelay: '0.2s' }]"
    />

    <!-- 活动信息卡片 -->
    <view
      class="activity-info animation-slide-top shadow bg-blue"
      :style="[{ animationDelay: '0.5s' }]"
    >
      <view class="activity-item" hover-class="none">
        <iconContainer class="item-icon" :icon="coupons" size="80rpx" />
        <text class="activity-title">领优惠卷</text>
      </view>
      <iconContainer class="item-icon" :icon="star" size="50rpx" />
      <view class="activity-item" hover-class="none">
        <iconContainer class="item-icon" :icon="activity" size="80rpx" />
        <text class="activity-title">热门活动</text>
      </view>
    </view>

    <!-- 通知 -->
    <view
      class="notice animation-slide-top shadow bg-orange"
      :style="[{ animationDelay: '0.5s' }]"
    >
      <scroll-view scroll-y class="notice-scroll">
        <view class="notice-item">
          <text class="notice-title">活动通知：</text>
          <text class="notice-content">活动通知内容</text>
        </view>

        <view class="notice-item">
          <text class="notice-title">活动通知：</text>
          <text class="notice-content">活动通知内容</text>
        </view>
      </scroll-view>
    </view>

    <!-- <test-loc /> -->
  </scroll-view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  // 灰色
  background-color: rgb(240, 240, 240);

  // background: rgb(255, 255, 255);
  // background: linear-gradient(
  //   90deg,
  //   rgba(255, 255, 255, 1) 0%,
  //   rgba(232, 230, 221, 1) 25%,
  //   rgba(195, 190, 240, 1) 50%,
  //   rgba(168, 216, 234, 1) 75%,
  //   rgba(255, 255, 255, 1) 100%
  // );
  // background-size: 300% 300%; /* 更大的绘制区域 */
  // animation: seamlessFlow 8s linear infinite;
}

// @keyframes seamlessFlow {
//   0% {
//     background-position: 0% 50%;
//   }
//   50% {
//     background-position: 100% 50%;
//   }
//   100% {
//     background-position: 0% 50%;
//   }
// }

.scroll-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  /* 背景图片 */
  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 0;
  }

  /* 活动信息卡片 */
  .activity-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    background: rgb(255, 255, 255);
    background-color: #dbf2f7;
    // background: radial-gradient(
    //   circle,
    //   rgba(255, 255, 255, 1) 40%,
    //   rgba(219, 226, 239, 1) 100%
    // );
    color: #333;
    // 圆角
    border-radius: 20rpx;
    // 上外边距
    margin-top: 5%;
    // 内边距
    padding: 20rpx;

    .activity-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;

      .item-icon {
        // 右外边距
        margin-right: 10rpx;
      }

      .activity-title {
        font-size: 30rpx;
      }
    }
  }

  /* 通知 */
  .notice {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 8%;
    margin: 0 auto;
    background-color: #fff;
    background: rgb(255, 255, 255);
    background-color: #f9e17e;
    // background: radial-gradient(
    //   circle,
    //   rgba(255, 255, 255, 1) 40%,
    //   rgba(255, 255, 210, 1) 100%
    // );
    color: #333;
    // 圆角
    border-radius: 20rpx;
    // 上外边距
    margin-top: 5%;

    .notice-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80%;

      .notice-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 90%;
        height: 100%;
        margin: auto auto;
        font-size: 30rpx;

        .notice-title {
          margin-right: 5%;
        }
        .notice-content {
        }
      }
    }
  }
}
</style>
